<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图swiper插件使用</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 500px;
            height: 300px;
            margin: 100px auto 0;
        }
        .swiper-container img{
            width: 100%;
            height: 100%;
        }
        .swiper-container{
            --swiper-theme-color: pink;/* 设置Swiper风格 */
            --swiper-navigation-color: #fff;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 30px;/* 设置按钮大小 */
        }
        /* 左右按钮样式 */
        .swiper-button-next,.swiper-button-prev{
            background: rgba(137, 207, 235,.6);
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        /* 缩略图样式 */
        .thumbs{
            width: 500px;
            height: 70px;
            margin-top: 20px;
        }
        .thumbs .swiper-slide{
            opacity: .4;
            margin-right: 10px;
        }
        .thumbs .active{
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 主图 -->
    <div class="swiper-container main">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/article_1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_5.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_6.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>

    <!-- 缩略图 -->
    <div class="swiper-container thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/article_1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_5.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/article_6.jpg" alt=""></div>
        </div>
    </div>
    
    <script src="./js/swiper.js"></script>
    <script>        
        var mySwiper = new Swiper ('.main', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000     // 延迟
            },
            effect:'coverflow', // 切换效果
            navigation: {       // 自定义左右按钮样式
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs:{    // 设置缩略图
                swiper: {
                    el: '.thumbs',
                    slidesPerView: 5    // 预览个数
                },
                slideThumbActiveClass:'active',     // 活动样式
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,    // 控制分页器
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            }/* ,
            
            // 如果需要滚动条
            scrollbar: {
            el: '.swiper-scrollbar',
          }, */
        })
        
        // 分页器点击切换
        for(i=0;i<mySwiper.pagination.bullets.length;i++){
            mySwiper.pagination.bullets[i].onclick=function(){
                this.click();
            };
        } 

        // 鼠标滑入滑出控制轮播
        let box = document.querySelector('.swiper-container');
        box.onmouseover = () =>{
            mySwiper.autoplay.stop();
        }
        box.onmouseout = () =>{
            mySwiper.autoplay.start();
        }
        </script>
</body>
</html>